import { InfoCircleOutlined } from '@ant-design/icons';
import { GridContent } from '@ant-design/pro-components';
// import { useRequest } from '@umijs/max';
import { Col, Row, Skeleton, Avatar, Statistic, Card, Tooltip, Button } from 'antd';
// import type { RangePickerProps } from 'antd/es/date-picker/generatePicker';
import { PageContainer } from '@ant-design/pro-components';
// import type dayjs from 'dayjs';
import type { FC } from 'react';
import { Suspense } from 'react';
import PageLoading from './components/PageLoading';
// import type { TimeType } from './components/SalesCard';
// import SalesCard from './components/SalesCard';
import ActiveChart from './components/ActiveChart';
import type { AnalysisData, CurrentUser } from './data.d';
// import { fakeChartData, queryTags } from './service';
import useStyles from './style.style';
// import { getTimeDistance } from './utils/utils';
import { ChartCard, Field } from './components/Charts';
import Yuan from './utils/Yuan';
import numeral from 'numeral';
import Trend from './components/Trend';
import {
  Liquid,
  //  WordCloud
} from '@ant-design/plots';
import { history } from 'umi';
// type RangePickerValue = RangePickerProps<dayjs.Dayjs>['value'];
type AnalysisProps = {
  dashboardAndanalysis: AnalysisData;
  loading: boolean;
};

const Info: FC<{
  title: React.ReactNode;
  value: React.ReactNode;
  bordered?: boolean;
}> = ({ title, value, bordered }) => {
  const { styles } = useStyles();
  return (
    <div className={styles.headerInfo}>
      <span>{title}</span>
      <p>{value}</p>
      {bordered && <em />}
    </div>
  );
};



const Analysis: FC<AnalysisProps> = () => {
  const { styles } = useStyles();
  // const [rangePickerValue, setRangePickerValue] = useState<RangePickerValue>(
  //   getTimeDistance('year'),
  // );
  // const { loading, data } = useRequest(fakeChartData);
  // const { loading: loadingTag, data: dataTag } = useRequest(queryTags);

  // const wordCloudData = (dataTag?.list || []).map((item) => {
  //   return {
  //     id: +Date.now(),
  //     word: item.name,
  //     weight: item.value,
  //   };
  // });

  // const selectDate = (type: TimeType) => {
  //   setRangePickerValue(getTimeDistance(type));
  // };
  // const handleRangePickerChange = (value: RangePickerValue) => {
  //   setRangePickerValue(value);
  // };
  // const isActive = (type: TimeType) => {
  //   if (!rangePickerValue) {
  //     return '';
  //   }
  //   const value = getTimeDistance(type);
  //   if (!value) {
  //     return '';
  //   }
  //   if (!rangePickerValue[0] || !rangePickerValue[1]) {
  //     return '';
  //   }
  //   if (
  //     rangePickerValue[0].isSame(value[0] as dayjs.Dayjs, 'day') &&
  //     rangePickerValue[1].isSame(value[1] as dayjs.Dayjs, 'day')
  //   ) {
  //     return styles.currentDate;
  //   }
  //   return '';
  // };

  const PageHeaderContent: FC<{
    currentUser: Partial<CurrentUser>;
  }> = ({ currentUser }) => {
    const { styles } = useStyles();
    const loading = currentUser && Object.keys(currentUser).length;
    if (!loading) {
      return (
        <Skeleton
          avatar
          paragraph={{
            rows: 1,
          }}
          active
        />
      );
    }
    return (
      <div className={styles.pageHeaderContent}>
        <div className={styles.avatar}>
          <Avatar size="large" src={currentUser.avatar} />
        </div>
        <div className={styles.content}>
          <div className={styles.contentTitle}>
            {currentUser.name || '锦NISHIKI'}
            <Button type='primary' style={{ marginLeft: 24 }} onClick={() => {
              history.push('/dashboard_edit');
            }}>编辑</Button>
          </div>
          <div>
            {currentUser.title}
          </div>
        </div>
      </div>
    );
  };

  const ExtraContent: FC<Record<string, any>> = () => {
    const { styles } = useStyles();
    return (
      <div className={styles.extraContent}>
        <div className={styles.statItem}>
          <Statistic title="有效期" value={'2025.11.25'} />
        </div>
      </div>
    );
  };

  return (
    <PageContainer
      content={
        <PageHeaderContent
          currentUser={{
            avatar: 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png',
            name: '吴彦祖',
            title: '国贸/建外 日本料理 餐饮',
          }}
        />
      }
      extraContent={<ExtraContent />}
    >
      <Card bordered={false} style={{ marginBottom: 24 }}>
        <Row>
          <Col sm={6} xs={24}>
            <Info title="今日发布量" value="56条" bordered />
          </Col>
          <Col sm={6} xs={24}>
            <Info title="今日阅读量" value="20次" bordered />
          </Col>
          <Col sm={6} xs={24}>
            <Info title="今日评论量" value="20条" bordered />
          </Col>
          <Col sm={6} xs={24}>
            <Info title="今日点赞量" value="200个" />
          </Col>
        </Row>
      </Card>
      <GridContent>
        <>
          <Row
            gutter={24}
            style={{
              marginTop: 24,
            }}
          >
            <Col xl={18} lg={18} md={18} sm={18} xs={18}>
              <Suspense fallback={null}>
                <Card
                  title="发布数据统计"
                  style={{
                    marginBottom: 24,
                  }}
                  bordered={false}
                >
                  <ActiveChart />
                </Card>
              </Suspense>
              {/* <Suspense fallback={null}>
                <SalesCard
                  rangePickerValue={rangePickerValue}
                  salesData={data?.salesData || []}
                  isActive={isActive}
                  handleRangePickerChange={handleRangePickerChange}
                  loading={loading}
                  selectDate={selectDate}
                />
              </Suspense> */}
            </Col>
            <Col xl={6} lg={6} md={6} sm={6} xs={6}>
              <Suspense fallback={<PageLoading />}>
                <ChartCard
                  bordered={false}
                  title="总发布量"
                  action={
                    <Tooltip title="指标说明">
                      <InfoCircleOutlined />
                    </Tooltip>
                  }
                  total={() => <Yuan>126560</Yuan>}
                  footer={<Field label="日均发布量" value={`${numeral(12423).format('0,0')}`} />}
                  contentHeight={46}
                >
                  <Trend
                    flag="up"
                    style={{
                      marginRight: 16,
                    }}
                  >
                    周同比
                    <span className={styles.trendText}>12%</span>
                  </Trend>
                  <Trend flag="down">
                    日同比
                    <span className={styles.trendText}>11%</span>
                  </Trend>
                </ChartCard>
                {/* <Card
                  title="热门标签"
                  loading={loadingTag}
                  style={{ marginTop: 24, }}
                  bordered={false}
                  bodyStyle={{
                    overflow: 'hidden',
                  }}
                >
                  <WordCloud
                    data={wordCloudData}
                    height={162}
                    textField="word"
                    colorField="word"
                    layout={{ spiral: 'rectangular', fontSize: [10, 20] }}
                  />
                </Card> */}
                <Card
                  title="剩余可用图片"
                  style={{ marginTop: 24, }}
                  bodyStyle={{
                    textAlign: 'center',
                    fontSize: 0,
                  }}
                  bordered={false}
                >
                  <Liquid height={160} percent={0.35} />
                </Card>
              </Suspense>
            </Col>
          </Row>
        </>
      </GridContent>
    </PageContainer>
  );
};
export default Analysis;
